<div
  id="{{ urls.Anchorize .title }}"
  x-data="{ open: {{ .open | default false }} }" class="border border-gray-light-200 dark:border-gray-dark-200 bg-white dark:bg-gray-dark-100 py-2 my-6 rounded">
  <button class="not-prose w-full py-2 px-4 flex justify-between" x-on:click="open = ! open">
    <div class="{{ with .large }} text-xl {{ end }} flex items-center gap-2">
      {{- with .icon }}
        <span class="icon-svg -mt-1">{{ partialCached "icon" . . }}</span>
      {{- end }}
      {{ .title }}
    </div>
    <span :class="{ 'hidden' : !open }" class="icon-svg">{{ partialCached "icon" "arrow_drop_up" "arrow_drop_up" }}</span>
    <span :class="{ 'hidden' : open }" class="icon-svg">{{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}</span>
  </button>
  <div x-show="open" x-collapse class="px-4">
    {{ markdownify .body }}
  </div>
</div>
